import React, { useState, useCallback } from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import './App.css';
import FileSearch from './components/fileSearch/FileSearch';
import FileList from './components/fileList/FileList';
import { faPlus, faFileImport } from '@fortawesome/free-solid-svg-icons'
import defaultFiles from './utils/defultFiles'
import BottomBtn from './components/bottomBtn/BottomBtn';
import TabList from './components/typeList/TypeList'
import SimoleMDE from 'react-simplemde-editor'
import 'easymde/dist/easymde.min.css'
// import {} from 'uuid'
 
function App() {
  // 文件数据列表
  const [files, setFiles] = useState(defaultFiles)
  // 当前激活文件id
  const [activeFileID, setActiveFileID] = useState('')
  // 当前打开的文件的id列表
  const [openFileIDs, setOpenFileIDs] = useState([])
  // 当前正在编辑的文件id列表
  const [unsaveFileIDs, setUnsaveFileIDs] = useState([])
  // 搜索数据记录数组
  const [searchFiles, setSearchFiles] = useState([])
  const [state, setstate] = useState('')

  // 当前打开的文件详细列表
  const openedFiles = openFileIDs.map((openID) => {
    return files.find((file) => file.id === openID)  
  })

  const onFileSearch = (value) => {
    console.log(value)
  }
  // 左侧文件列表点击
  const fileClick = (fileID) => {
    // 设置一打开文件id
    setActiveFileID(fileID)
    if (!openFileIDs.includes(fileID)) {
      // 添加至已打开文件列表
      setOpenFileIDs([...openFileIDs, fileID])
    }
  }

  // tap点击
  const tabClick = (fileID) => {
    setActiveFileID(fileID)
  }

  // tab关闭
  const tabClose = (fileID) => {
    const tabArr = openFileIDs.filter((id) => {
      return id !== fileID
    })
    setOpenFileIDs(tabArr)
    if (openFileIDs.length) {
      setActiveFileID(openFileIDs[0])
    } else {
      setActiveFileID('')
    }
  }
  // 在文章内容改变时需要让该文章变为正在编辑状态,并更新文章内容
  const fileChange = (value) => {
    console.log(value)
    let arr = [...files]
    const newContent = arr.map((file) => {
      if (file.id === activeFileID) {
        file.body = value
      }
      return file
    })
    console.log(newContent)
    setFiles(newContent)
    setUnsaveFileIDs([...unsaveFileIDs, activeFileID])
  }

  const clickCreateFile = () => {}

  // 左侧文件列表删除
  const fileDelete = (id) => {
    tabClose(id)
    const newFiles = files.filter((file) => file.id !== id)
    setFiles(newFiles)
  }

  // // 新建文件
  // const createNewFile = () => {
  //   const newFiles = [
  //     ...files,
  //     {
  //       id: 
  //     }
  //   ]
  // }
  
  // 当前正在打开的文件(详细)
  const activeFile = files.find((file) => {
    return file.id === activeFileID
  })

  // 修改文件名称
  const updateFileName = (id, title) => {
    const newContent = files.map((file) => {
      if (file.id === id) {
        file.title = title
      }
      return file
    })
    console.log(newContent)
    setFiles(newContent)
  }

  // 左侧文件搜索
  const fileSeach = (keyword) => {
    const newFiles = files.filter(file => file.title.includes(keyword))
    setSearchFiles(newFiles)
  }
  // 当搜索数组里有数据,就代表已经触发搜索,展示搜索列表,否则展示普通列表
  const fileListArr = (searchFiles.length > 0) ? searchFiles : files
  return (
    <div className="App container-fluid">
      <div className='row no-gutters'>
        <div className='col-3 px-0 left-panel'>
          <FileSearch 
            title="我的云文档"
            onFileSearch={fileSeach}
          ></FileSearch>
          <FileList 
            files={fileListArr}
            onFileClick={fileClick}
            onFileDelete={fileDelete}
            onSaveEdit={updateFileName}
          ></FileList>
          <div className='row mx-0 btn-main'>
            <div className='col-6 px-0'>
              <BottomBtn 
                text='新建'
                colorClass='btn-primary'
                icon={faPlus}
              ></BottomBtn>
            </div>
            <div className='col-6 px-0'>
              <BottomBtn 
                text='编辑'
                colorClass='btn-success'
                icon={faFileImport}
              ></BottomBtn>
            </div>
          </div>
        </div>
        <div className='col-9  px-0 right-panel'>
          {
            !activeFile && 
            <div className='start-page'>
              选择或创建新的Markdown文件
            </div>
          }
          {
            activeFile && 
            <>
              <TabList
                files={openedFiles}
                activeId={activeFileID}
                unsaveIds={unsaveFileIDs}
                onTabClick={tabClick}
                onCloseTab={tabClose}
              ></TabList>
              <div className='SimoleMDE-main'>
                <SimoleMDE 
                  key={activeFile?.id}
                  value={activeFile?.body}
                  onChange={ fileChange }
                  options={{
                    minHeight: '86vh'
                  }}
                ></SimoleMDE>
              </div>
            </>
          }
        </div>
      </div>
    </div>
  );
}

export default App;
